<!DOCTYPE html>
<!-- saved from url=(0049)http://localhost:50289/untitled10/chart/pie0.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-3d.js"></script>
<script src="js/operation.js"></script>
<script type="text/javascript">
	//Ajax从服务器数据库异步请求数据
	function initData() {
		$.ajax({
			cache : true,
			type : 'post',
			url : 'MacServlet',
			dataType : 'json',
			error : function(requset) {
				alert("Connection failed!");
			},
			success : onSuccess
		});
	}
	//定义数据，用来存放从客户端传过来的数据
	var dataArray = [];
	//自定义对象（类似于结构体）
	function myData(des, c) {
		//中文名称
		this.des = des;
		//数量
		this.c = c;
	}
	//当Ajax执行成功时执行的函数
	function onSuccess(data) {
		$.each(data, function(index, mac) {
			dataArray[index] = new myData(mac['des'], Number(mac['count']));
			index += 1;
		});

		preData();		
		drawPie();
	};

	//在绘制饼状图之前进行的数据处理
	function preData() {
		var sum = 0;
		var percent = new Array();
		var size = dataArray.length;
		//对各个品牌的数目进行求和
		for (var i = 0; i < size; i++) {
			sum += dataArray[i].c;
		}
		//对各个品牌所占比例求百分比
		for (var i = 0; i < size - 1; i++) {
			var temp = dataArray[i].c / sum;
			//小数点后面保留四位
			var t = temp.toFixed(4);
			//由于js中四则混合运算会出现问题，所以通过自定义方法进行运算，具体过程在operation.js中
			percent[i] = accMul(t, 100);
		}
		percent[size - 1] = accSub(100, eval(percent.join('+')));
		
		//自定义方法，作用等同于结构体
		function myArray(name, y) {
			this.name = name;
			this.y = y;
		}
		//全局变量data数组,用来保存绘制饼图所需的直接数据
		data = new Array();
		for (var i = 0; i < size; i++) {
			var aa = dataArray[i].des + percent[i] + "%";
			var bb = dataArray[i].c;
			var s = new myArray(aa.toString(), bb);
			data.push(s);
		}
		;
	}
	var charts = null;
	//绘制饼状图
	function drawPie() {
		$(function() {
			charts = $('#container').highcharts({
				chart : {
					type : 'pie',
					options3d : {
						enabled : true,
						alpha : 45,
						beta : 0
					}
				},
				title : {
					text : "手机品牌分布比例图"
				},
				plotOptions : {
					pie : {
						depth : 25
					}
				},
				series : [ {
					data : data
				} ]
			});
		});		
	}
</script>
</head>
<body onload="initData()">
	<div id="container" style="height: 400px"></div>
</body>
</html>


